<template>
  <view class="bg-gray-50 w-[750rpx] min-h-screen box-border">
    <!-- Header -->
    <PageHeader title="提现到微信" :showBack="true" />
    <!-- <view class="bg-white h-[88rpx] flex items-center justify-between px-[30rpx] border-b border-gray-100 fixed top-0 left-0 right-0 z-100">
      <IconFont name="arrow-left" class="text-[30rpx] text-gray-800" @click="handleBack" />
      <text class="text-[34rpx] font-medium text-gray-800">提现到微信</text>
      <view></view>
    </view> -->
    
    <view class="pt-[30rpx] px-[20rpx] pb-[30rpx]">
      <!-- 余额卡片 -->
      <view class="bg-white rounded-[12rpx] p-[30rpx] mb-[20rpx] shadow-sm">
        <text class="text-[28rpx] text-gray-600 mb-[20rpx] block">可提现余额</text>
        <text class="text-[48rpx] font-bold text-orange-500 block">¥ 2,580.00</text>
        <!-- <text class="text-[24rpx] text-gray-500 mt-[10rpx] block">温馨提示：普通会员提现将扣除15%信息服务费</text> -->
      </view>
      
      <!-- 提现金额 -->
      <view class="bg-white rounded-[12rpx] p-[20rpx] mb-[20rpx] shadow-sm">
        <text class="text-[30rpx] font-medium mb-[20rpx] block">提现金额</text>
        
        <view class="mb-[20rpx]">
          <text class="text-[28rpx] text-gray-600 mb-[10rpx] block">请输入提现金额</text>
          <input 
            v-model="withdrawAmount"
            type="number" 
            class="w-full box-border flex items-center h-[88rpx] border border-gray-300 rounded-[8rpx] px-[20rpx] text-[32rpx] text-gray-800 bg-gray-50"
            placeholder="请输入金额" 
            maxlength="11"
            @input="calculateFee"
          />
        </view>
        
        <!-- <view class="flex justify-between items-center bg-yellow-50 px-[20rpx] py-[20rpx] rounded-[8rpx] mb-[20rpx]">
          <text class="text-[28rpx] text-orange-600">预计到账金额：</text>
          <text class="text-[28rpx] text-red-500 font-bold">¥ {{ actualAmount }}</text>
        </view>
        
        <view class="flex justify-between items-center bg-yellow-50 px-[20rpx] py-[20rpx] rounded-[8rpx]">
          <text class="text-[28rpx] text-orange-600">提现服务费：</text>
          <text class="text-[28rpx] text-red-500 font-bold">¥ {{ serviceFee }}</text>
        </view> -->
      </view>
      
      <!-- 提现方式 -->
      <view class="bg-white rounded-[12rpx] p-[20rpx] mb-[20rpx] shadow-sm">
        <text class="text-[30rpx] font-medium mb-[20rpx] block">提现方式</text>
        
        <view class="flex items-center bg-gray-50 px-[20rpx] py-[20rpx] rounded-[8rpx]">
          <view class="w-[60rpx] h-[60rpx] bg-green-500 rounded-full flex items-center justify-center mr-[20rpx] text-white text-[30rpx]">
            微
          </view>
          <view class="flex-1">
            <text class="text-[30rpx] font-medium block">微信收款</text>
            <text class="text-[26rpx] text-gray-500 mt-[5rpx] block">微信号：wxid_123456789</text>
          </view>
          <text class="text-green-500 text-[28rpx]">已绑定</text>
        </view>
      </view>
      
      <!-- 提现按钮 -->
      <nut-button 
        type="primary" 
        size="large"
        class="w-full h-[88rpx] text-[32rpx] font-medium bg-green-500"
        @click="handleWithdraw"
      >
        确认提现
      </nut-button>
      
      <!-- 提现须知 -->
      <view class="mt-[20rpx] p-[20rpx] bg-gray-100 rounded-[8rpx] text-[24rpx] text-gray-600 leading-[1.5]">
        <text class="text-red-500 font-medium block mb-[10rpx]">提现须知：</text>
        <view class="mb-[8rpx]">1. 最低提现金额：100元</view>
        <view class="mb-[8rpx]">2. 普通会员单月提现限额1.5万元，SVIP会员单月提现限额15万元</view>
        <view class="mb-[8rpx]">3. 提现到账时间：工作日9:00-17:00申请，预计2小时内到账；其他时间申请，预计次日到账</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import PageHeader from '@/components/PageHeader.vue'  

// 提现金额
const withdrawAmount = ref('')

// 计算服务费（普通会员15%）
const serviceFee = computed(() => {
  const amount = parseFloat(withdrawAmount.value) || 0
  return (amount * 0.15).toFixed(2)
})

// 计算实际到账金额
const actualAmount = computed(() => {
  const amount = parseFloat(withdrawAmount.value) || 0
  const fee = parseFloat(serviceFee.value)
  return (amount - fee).toFixed(2)
})

// 计算手续费
const calculateFee = () => {
  // 触发计算，computed会自动更新
}

// 返回
const handleBack = () => {
  Taro.navigateBack()
}

// 提现
const handleWithdraw = () => {
  const amount = parseFloat(withdrawAmount.value)
  
  if (!amount) {
    Taro.showToast({
      title: '请输入提现金额',
      icon: 'none'
    })
    return
  }
  
  if (amount < 100) {
    Taro.showToast({
      title: '最低提现金额为100元',
      icon: 'none'
    })
    return
  }
  
  if (amount > 2580) {
    Taro.showToast({
      title: '提现金额不能超过可用余额',
      icon: 'none'
    })
    return
  }

  Taro.showToast({
    title: '提现申请已提交，预计2小时内到账',
    icon: 'success',
    duration: 3000
  })
  withdrawAmount.value = ''
  
  // Taro.showModal({
  //   title: '确认提现',
  //   content: `提现金额：¥${amount}\n服务费：¥${serviceFee.value}\n到账金额：¥${actualAmount.value}`,
  //   success: (res) => {
  //     if (res.confirm) {
  //       Taro.showToast({
  //         title: '提现申请已提交，预计2小时内到账',
  //         icon: 'success',
  //         duration: 3000
  //       })
        
  //       // 清空输入
  //       withdrawAmount.value = ''
  //     }
  //   }
  // })
}
</script>